<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预警管理</title>
    <script src="dist/js/jquery-1.9.1.min.js"></script> 
    <link rel="stylesheet" href="dist/css/animate.css" >
    <link rel="stylesheet" href="dist/css/normalize.css">
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <link rel="stylesheet" href="dist/css/index_public.css">
    <link rel="stylesheet" href="dist/css/webuploader.css">
    <script src="dist/js/js/index_head_left.js"></script>
    <script src="dist/js/My97DatePicker_ie9/WdatePicker.js"></script>
    <link rel="stylesheet" href="dist/css/toastr.min.css" >
    <link rel="stylesheet" href="dist/css/font-awesome.min.css">
	<script src="dist/js/widgets/toastr.min.js"></script>
	<script type="text/javascript" src="dist/js/widgets/jquery.nicescroll.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sjnEPnWsuqC8nnOea4HMNQkUqK3TGBmu"></script>

    <!-- alert11.17 -->
    <link rel="stylesheet" href="dist/css/sweetalert.css">
    <script src="dist/js/widgets/sweetalert.min.js"></script>
</head>
    <script>
	    $.ajaxSetup ({
			cache: false //close AJAX cache
		});
		
		var pageSize = 10;
		
         $(document).ready(function(){
            $("#div1").load('include/left_title.html',function(){
                menu(); 
            })
            $("#loadHeader").load("include/header.html",function(){
                header();
            })
            $("#personal").load("include/modelpersonal.html",function(){
                personalModel();
            })
            
            var mydate = new Date();
            var y = mydate.getFullYear();
            var m = mydate.getMonth()+1;
            if(parseInt(m)<10){
            	m='0'+m;
            }
            var d = mydate.getDate();
            if(parseInt(d)<10){
            	d='0'+d;
            }
            $("#start_time").val(y+"-"+m+"-"+d);
            $("#end_time").val(y+"-"+m+"-"+d);
            
            getWarningInfo(1);
            
    	});
        
         
         function getWarningInfo(page){
 			
        	 var startTime = $("#start_time").val();
        	 var endTime = $("#end_time").val();
        	 var content = $("#search_content").val();
        	 var startRec = (page-1)*pageSize;
 			$.ajax({
 	 			type:"POST",
 	 			url:"actionServlet",
 	 			data:{"actionName":"earlyWaringService","method":"queryListCount","startTime":startTime,"endTime":endTime,"content":content},
 	 			dataType:"JSON",
 	 			success:function(data){
 	 				if(data.statusCode == 100){
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
 	 				var allSize = data.result;
 	 				if(allSize > pageSize){
 	 					$('.M-box1').css('display','');
 	 					$('.M-box1').pagination({
 		 		            totalData:allSize,
 		 		            showData:pageSize,
 		 		            coping:false,
 		 		           	current:page,
 		 		            prevContent:'上一页',	//上一页内容
 		 		        	nextContent:'下一页',	//下一页内容
 		 		            jumpBtn:"确定",
 		 		            callback: firstcallbackAjax
 		 		        });
 	 					$('.remind').css({'background':'transparent','color':'transparent'})
 	 				}
 	 				else if(allSize=='0'){
 	 					$('.M-box1').css('display','none');
						if(sessionStorage.getItem('warningCount')!='0'){
							$('.remind').css({'background':'#FE8110','color':'#fff'})
						}
						else{
							$('.remind').css({'background':'transparent','color':'transparent'})
						}
 	 				}
 	 				else{
 	 					$('.M-box1').css('display','none');
 	 					$('.remind').css({'background':'transparent','color':'transparent'})
 	 				}
 	 			}
 			});
 			$.ajax({
 	 			type:"POST",
 	 			url:"actionServlet",
 	 			data:{"actionName":"earlyWaringService","method":"queryList","startRec":startRec,"isRead":"1","pageSize":pageSize,"startTime":startTime,"endTime":endTime,"content":content},
 	 			dataType:"JSON",
 	 			success:function(data){
 	 				if(data.statusCode == 100){
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
 	 				var htmlStr = $("#demo_tr").html();
 					$("#data_table").empty();
 					$("#data_table").append("<tr id='demo_tr' style='display:none'>" + htmlStr+ "</tr>");
 					for(var i=0;i<data.result.length;i++){
 						var newStr = "<tr>" + htmlStr+"</tr>";
 						var warningType = data.result[i].type;
 						var warningSource = "";
 						if(warningType=='3'){
 							warningType='农业';
 							if(data.result[i].groundFishpondNum=='0'){
 								warningSource="气象站-"+ data.result[i].deviceName;
 							}else {
 								warningSource=data.result[i].groundFishpondNum+"号大棚-" + data.result[i].deviceName;
 							}
 							
 						}else if(warningType=='4'){
 							warningType='渔业';
 							if(data.result[i].groundFishpondNum=='0'){
 								warningSource="气象站-" + data.result[i].deviceName;
 							}else{
 								warningSource=data.result[i].groundFishpondNum+"号鱼塘-" + data.result[i].deviceName;
 							}
 						}
 						newStr = newStr.replace("#warningType#",warningType);
 						newStr = newStr.replace("#warningSource#",warningSource);
 						newStr = newStr.replace("#warningTime#",data.result[i].createTime);
 						newStr = newStr.replace("#warningInfo#",data.result[i].waringInfo);
 						$("#data_table").append(newStr);
 						if(i%2 == 1){
 							$("#data_table").children("tr:last-child").css("background","#F7F8FA")
 						}
 					}
 	 			}
 	 		});
 		}
 		
 		function firstcallbackAjax(api){
             var current=api.getCurrent();
             getWarningInfo(current);
 		}
         
 		function chooseDateType(type){
 			$("#start_time").attr("disabled",'true');
 			$("#start_time").css("background",'#F8F8F8');
 			$("#end_time").attr("disabled",'true');
 			$("#end_time").css("background",'#F8F8F8');
 			$(".img_date_choose").attr("src","img/circle_w.png");
 			var dateTime=new Date();
 			if(type == '1'){
 				$("#today").attr("src","img/circle_b.png");
 			}
 			if(type == '2'){
 				$("#sevenday").attr("src","img/circle_b.png");
 				dateTime.setTime(dateTime.setDate(dateTime.getDate()-7));
 			}
 			if(type == '3'){
 				$("#thirtyday").attr("src","img/circle_b.png");
 				dateTime.setTime(dateTime.setDate(dateTime.getDate()-30));
 			}
 			if(type == '4'){
 				$("#days").attr("src","img/circle_b.png");
 				$("#start_time").removeAttr("disabled");
 	 			$("#start_time").css("background",'#FFFFFF');
 	 			$("#end_time").removeAttr("disabled");
 	 			$("#end_time").css("background",'#FFFFFF');
 			}
 			var y = dateTime.getFullYear();
            var m = dateTime.getMonth()+1;
            if(parseInt(m)<10){
            	m='0'+m;
            }
            var d = dateTime.getDate();
            if(parseInt(d)<10){
            	d='0'+d;
            }
            $("#start_time").val(y+"-"+m+"-"+d);
            if(type != '4'){
            	getWarningInfo(1);
            }
 		}
    </script>
    <style>
        #alarm{margin-top:20px;}
        #alarm th,#alarm tr,#alarm td{border:1px solid #ECEFF5;height:50px;line-height:50px;text-align: center}
        .smallBg{color:#fff;border-radius:2px;padding:3px 4px;background:#9DC7DB;font-weight:normal}
        .M-box1{margin:50px 0;}
		.M-box1>a,.M-box1>span{color:#7E7E7E;border:1px solid #ddd;padding:1% 1.5%;margin-left:0.5%;border-radius:2px;}
        .M-box1>a.active,.M-box1>span.active{background:#0583DF;color:#fff;}
        #alarmSelectTime{margin-top:30px;height:50px;line-height:50px;}
        #alarmSelectTime .moren>i{top:16px;}
        #alarmSelectTime .public>i{top:16px;}
        #alarmSelectTime b.public>i{top:0px;}
        #alarmSelectTime b.moren>i{top:0px;}
        .public,.moren{margin-left:18px;}
         #start_time,#end_time{width:35%;border-radius: 3px;border:1px solid #ddd;line-height:7px;} 
        .glyphicon{left:-6px;top:10px;}
        .input-group{margin-left:20px;}
		.form_div {
		  position: relative;
		  width: 150px;
		}
		.d1 {background: #ffffff;;width:150px;float:left;height:35px}
		.d1 input {
		  width: 100%;
		  height: 42px;
		  padding-left: 10px;
		  border: 1px solid #F8F8F8;
		  border-radius: 5px;
		  outline: none;
		  background: #ffffff;
		  color: #000000;
		  height:35px
		}
		.d1 button {
		  position: absolute; 
		  top: 0;
		  right: 0px;
		  width: 42px;
		  height: 42px;
		  border: none;
		  background: #F8F8F8;
		  border-radius: 0 5px 5px 0;
		  cursor: pointer;
		  height:35px
		}
		.d1 button:before {
		  content: "\f002";
		  font-family: FontAwesome;
		  font-size: 16px;
		  color: #B0B0B0;
		  height:35px
		}
    </style>
<body>
 <div class="container-fluid">
     <!-- header  -->
    <div class="nav row " id="loadHeader">
    </div>
    <div class="row neirong">
        <!-- 侧边导航 -->
         <div id="div1" class="sidebar col-xs-2">
            
        </div>
        
        <!-- 主题内容 -->
        <div class="main col-xs-10 row animated fadeInRight" style="min-height:800px;background-color:#F4F7FE;padding:20px">
        	<div style="width:100%;min-height:800px;background-color:#FFFFFF;border: 1px solid #ECEFF5;">
        		<div class="row" class="col-xs-12" style="margin-right:5px;margin-top:20px;">
        			<div>
        				<table style="float:left;margin-left:50px">
        					<tr>
        						<td width="14" onclick="chooseDateType(1)" style="cursor:pointer">
        							<img id="today" class="img_date_choose" src="img/circle_b.png" alt="">
        						</td>
        						<td  onclick="chooseDateType(1)" style="cursor:pointer" width="5"></td>
        						<td  onclick="chooseDateType(1)" style="cursor:pointer" >今天</td>
        						<td width="20"></td>
        						<td width="14" onclick="chooseDateType(2)" style="cursor:pointer">
        							<img id="sevenday" class="img_date_choose" src="img/circle_w.png" alt="">
        						</td>
        						<td width="5" onclick="chooseDateType(2)" style="cursor:pointer"></td>
        						<td onclick="chooseDateType(2)" style="cursor:pointer">近7日</td>
        						<td width="20"></td>
        						<td width="14" onclick="chooseDateType(3)" style="cursor:pointer">
        							<img id="thirtyday" class="img_date_choose" src="img/circle_w.png" alt="">
        						</td>
        						<td width="5" onclick="chooseDateType(3)" style="cursor:pointer"></td>
        						<td onclick="chooseDateType(3)" style="cursor:pointer">近30日</td>
        						<td width="20"></td>
        						<td width="14" onclick="chooseDateType(4)" style="cursor:pointer">
        							<img id="days" class="img_date_choose" src="img/circle_w.png" alt="">
        						</td>
        						<td width="5" onclick="chooseDateType(4)" style="cursor:pointer"></td>
        						<td onclick="chooseDateType(4)" style="cursor:pointer">自定义</td>
        					</tr>
        				</table>
        				<table style="float:right">
            				<tr>
            					<td>
            						<img src="img/date.jpg" alt="">
            					</td>
            					<td width="10"></td>
            					<td width="120">
            						<input style="background:#F8F8F8;width:120px;height:35px" type="text" name="start_time" id="start_time" class="form-control" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd', readOnly: true ,maxDate:'#F{$dp.$D(\'end_time\')||\'%y-%M-%d\'}'});" format="yyyy-MM-dd" value="" >
	                        	</td>
	                        	<td width="2"></td>
	                        	<td width="5"><b>至</b></td>
	                        	<td width="2"></td>
	                        	<td width="120">
	                        		<input style="background:#F8F8F8;width:120px;height:35px" type="text" name="end_time" id="end_time" class="form-control" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd', readOnly: true ,minDate:'#F{$dp.$D(\'start_time\')}'});" format="yyyy-MM-dd" value="" >        
	                        	</td>
	                        	<td width="10"></td>
	                        	<td>
	                        		<div class="search d1">
									  <div class="form_div">
										  <input id="search_content" type="text" placeholder="关键字查询">
										  <button onclick="getWarningInfo(1)"></button>
									  </div>
									</div>
	                        	</td>
            				</tr>
            			</table>
        			</div>
<!--             		<div class="col-xs-6 col-md-offset-6 dateTime" style="text-align:right;" > -->
            			
<!--             		</div> -->
            	</div>
            	
            	<table class="col-xs-12" id="alarm" >
                <thead>
                    <tr style="background-color:#F9FDFF">
                       <th>类型</th>
                       <th>时间</th>
                       <th>来源</th>
                       <th>详情</th>
                    </tr>
                </thead>
                <tbody id="data_table">
                    <tr id="demo_tr" style="display:none">
                        <td>
                            <span>#warningType#</span>
                        </td>
                        <td>#warningTime#</td>
                        <td>
                            <label>#warningSource#</label>
                        </td>
                        <td>#warningInfo#</td>
                    </tr>
                </tbody>
            </table>                   
            <div class="col-xs-12  page row" style="text-align:right" >
                    <div class="M-box1 col-xs-12" style="text-align:right;"></div>
             </div>
            	
            	
        	</div>
            	
        </div>
        </div>
         <div class="row" id="divFooter"></div> 
        </div>
  <!-- 个人信息 -->
    <div class="modal fade" id="personal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">  
    </div> 

<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/js/widgets/jquery.pagination.js"></script>
</body>
</html>